<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="center_panel">
    <!--页面列表-->
    <div class="page_list">
      <NTooltip placement="bottom" trigger="hover">
        <template #trigger>
          <n-button type="info" @click="onCreateNewPage">➕</n-button>
        </template>
        <span>添加页面</span>
      </NTooltip>
      <div class="list_bar_tag h_h_overflow">
        <div class="navigation_button" v-for="Item in Store.pages" :class="[Store.pageKey === Item.key ? 'h_active' : '']"
          @click="onSetCurrentPage(Item.key)">
          {{ Item.label }}
        </div>
      </div>
    </div>
    <!--面板-->
    <div ref="canvasRef" class="center_panel_frame" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp"
      @mousewheel="onMouseWheel">
      <canvas class="center_panel_canvas" :style="{
        width: canvasWidth * canvasScale + 'px',
        height: canvasHeight * canvasScale + 'px',
      }"></canvas>
    </div>
    <slot name="downView"></slot>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 组件引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onCalcCursor,//计算光标点
  onCreateNewPage,
  onSetCurrentPage,
} from "@/functions";

/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
// 🐸 引入存储
/**🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾🌾*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useProjectStore } from "@/store/projectStore"; // 工程

/**👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾👨‍🌾*/
// 🐸 使用存储
/**👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾👩‍🌾*/
const projectStore = useProjectStore(); // 工程
const canvasStore = useCanvasStore(); // 画布
/* ================================================================================================ */
//                                变量
/* ================================================================================================ */
/** 存储 */
let Store = reactive({
  /** 页面 */
  pages: computed(() => projectStore.pages),
  /** 页面键 */
  pageKey: computed(() => projectStore.pages[projectStore.pageIndex].key),
});
/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 画布缩放 */
let canvasScale = computed(() => canvasStore.canvasAttr.canvasScale);
/** 画布宽度 */
let canvasWidth = computed(() => canvasStore.canvasAttr.canvasWidth);
/** 画布高度 */
let canvasHeight = computed(() => canvasStore.canvasAttr.canvasHeight);
/** 画布参数 */
let canvasRef = ref();

/** 鼠标按下事件 */
const onMouseDown = (e: MouseEvent) => {
  console.log("♌ 鼠标按下事件");
  e.preventDefault();
  /**◆ 计算光标点 */
  onCalcCursor(e.offsetX, e.offsetY);
};

/** 鼠标抬起事件 */
const onMouseUp = (e: MouseEvent) => {
  console.log("♌ 鼠标抬起事件");
  e.preventDefault();
  /**◆ 计算光标点 */
  onCalcCursor(e.offsetX, e.offsetY);
};

/** 鼠标移动事件 */
const onMouseMove = (e: MouseEvent) => {
  console.log("♌ 鼠标移动事件");
  e.preventDefault();
  /**◆ 计算光标点 */
  onCalcCursor(e.offsetX, e.offsetY);
};

/** 滚轮轮事件 */
const onMouseWheel = (e: any) => {
  console.log("♌ 滚轮轮事件");
  if (e.wheelDelta > 0) {
    canvasStore.canvasAttr.canvasScale = canvasStore.canvasAttr.canvasScale + 0.05
  }
  if (e.wheelDelta < 0) {
    canvasStore.canvasAttr.canvasScale = canvasStore.canvasAttr.canvasScale - 0.05
  }
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

// 编辑框
.center_panel {
  background-color: #000000;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

/* 水平导航列表 */
.page_list {
  margin: 0px;
  padding: 0px;
  height: 34px;
  width: 100%;
  user-select: none;
  background-color: rgb(0, 0, 0);
  display: flex;
  flex-direction: row;
  justify-content: start;
}

// 列表条标签
.list_bar_tag {
  margin-left: 5px;
  padding: 0px;
  height: 40px;
  width: 60vw;
  user-select: none;
  background-color: rgb(0, 0, 0);
  display: flex;
  flex-direction: row;
  justify-content: start;
}

// 水平导航按钮
.navigation_button {
  margin-left: 0px;
  margin-right: 3px;
  padding: 0px;
  min-width: 70px;
  height: 26px;
  font-size: medium;
  text-align: center;
  background-color: rgb(80, 80, 80);
  color: rgb(218, 218, 218);
  border-bottom: 3px solid rgb(80, 80, 80);
  cursor: pointer; // 小手指

  &:hover {
    color: rgb(0, 0, 0);
  }
}

// 激活
.h_active {
  background-color: rgb(118, 118, 118);
  color: rgb(0, 0, 0);
  border-bottom: 3px solid #1d9f00;
}

// 面板框
.center_panel_frame {
  width: 100%;
  height: 100%;
  position: relative;
  border-top: 1px solid rgb(80, 80, 80);
  border-bottom: 1px solid rgb(80, 80, 80);
  overflow-y: scroll;
  overflow-x: scroll;
  /* firefox */
  scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
  scrollbar-width: 10px;

  /* chrome */
  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(197, 197, 197);
  }
}

.center_panel_canvas {
  border: 1px solid rgb(218, 218, 218);
  position: absolute;
}
</style>
